<template>
  <div class="con">
    <div class="echarts" id="quality8Echarts"></div>
  </div>
</template>
  
  <script>
export default {
  name:'qualityArea8',
  data() {
    return {
      option: {
        title: {
          text: "240项",
          subtext: " 问题总数",
          textStyle: {
            color: "#0054bb",
          },
          left: "24%",
          top: "41%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          right: "8%",
          top: "center",
          orient: "vertical",
          icon: "circle",
          textStyle: {
            color: "#ccc",
          },

          formatter: (name) => {
            let data11 = [
              { value: 1048, name: "待验证" },
              { value: 735, name: "待整改" },
              { value: 580, name: "已整改" },
            ];
            let target;
            for (let i = 0; i < data11.length; i++) {
              if (data11[i].name === name) {
                target = data11[i].value;
              }
            }
            let arr = [
              name + "\xa0\xa0\xa0\xa0" + target + "项" + "\xa0\xa0\xa0\xa020%",
            ];
            return arr.join("");
          },
        },
        series: [
          {
            name: "质量",
            type: "pie",
            radius: ["100%", "80%"],
            avoidLabelOverlap: false,
            left: "-165px",
            top: "10px",
            label: {
              show: false,
              position: "center",
              color: "#ccc",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "normal",
              },
            },
            labelLine: {
              show: true,
            },
            data: [
              { value: 1048, name: "待验证" },
              { value: 735, name: "待整改" },
              { value: 580, name: "已整改" },
            ],
          },
        ],
      },
    };
  },
  methods: {},
  mounted() {
    setTimeout(() => {
      const myCharts = this.$echarts.init(
        document.getElementById("quality8Echarts")
      );
      myCharts.setOption(this.option);
    }, 500);
  },
};
</script>
  
  <style lang="scss" scoped>
.con {
  .echarts {
    width: 435px;
    height: 195px;
  }
}
</style>